import React, { Component } from 'react';
import { Carousel,Divider } from 'antd';
// import SearchBox from "../../components/searchBox";
import "./../../css/app.css";
// import HomeCard from './homeCard';
import HomePage from './homePage';

const contentStyle = {
  margin: 0,
  height: '450px',
  color: '#fff',
  lineHeight: '160px',
  textAlign: 'center',
  background: '#364d79',
};

const imageStyle = {
  width: '100%', // 图像宽度100%
  height: '100%', // 图像高度100%
};



class Home extends Component {
  state = {
    searchQuery: "",
    isSearchBoxFixed: false 
  };

  // Carousel组件的变化回调函数
  onChange = (currentSlide) => {
    console.log(currentSlide);
    // 在这里可以执行轮播图变化后的逻辑操作
  };

  //搜索框，实现搜索功能
  handleSearch = (query) => {
    this.setState({ searchQuery: query, selectedGenre: null, currentPage: 1 });
  };

  componentDidMount() {
    // 在组件挂载时直接显示模态框
    this.showModal();
  }

  // 显示模态框
  showModal = () => {
    this.setState({
      visible: true,
    });
  };

  // 确认身份
  handleIdentityConfirm = () => {
    // 在这里处理用户确认身份后的逻辑
    this.setState({
      visible: false,
    });
  };

  // 取消确认
  handleCancel = () => {
    this.setState({
      visible: false,
    });
  };

  // 处理单选框变化
  handleRadioChange = (e) => {
    this.setState({
      selectedIdentity: e.target.value,
    });
  };

  render() {
    // const [top, setTop] = React.useState(100);
    return (
      <div>
        <Carousel afterChange={this.onChange}>
          <div>
            <h3 style={contentStyle}><img alt='' src='/img/p5.jpg' style={imageStyle} /></h3>
          </div>
          <div>
            <h3 style={contentStyle}><img alt='' src='/img/p6.jpg' style={imageStyle} /></h3>
          </div>
          <div>
            <h3 style={contentStyle}><img alt='' src='/img/p7.jpg' style={imageStyle} /></h3>
          </div>
          <div>
            <h3 style={contentStyle}><img alt='' src='/img/p4.jpg' style={imageStyle} /></h3>
          </div>
        </Carousel>
    
        {/* 在这里添加Home组件的内容 */}
        {/* <div className="search">
        <Affix offsetTop={top}>
          <SearchBox
            value={this.state.searchQuery}
            onChange={this.handleSearch}
          />
          </Affix>
        </div> */}
        <Divider/>
        <div className="card">
          <HomePage/>
        </div>
      </div>
    );
  };
}

export default Home;
